// 放大镜插件，
/*
@original：同事杨XX
@update  ：Mr.xue
@date 	 ：2016.12.23

调用示例： 
    <html>
        <body>
            <div class="product-main-image">
                 <!-- <img src="/images/t.jpg"  class="img-responsive"> -->
            </div>
        </body>
    </html>
        $("div.product-main-image").imgZoom(); //图片放大镜
*/
;(function ($) {
    $.fn.imgZoom = function (options) {
        var defaultSet = {
            eventBroker: "body", //事件的代理对象，可指定div等等
            mouseX: 0,   //鼠标偏移X轴的像素
            mouseY: 0      //鼠标偏移Y轴的像素
        };
        var zoomOptions = $.extend({}, defaultSet, options);

        if (!$("#js_zoom_style").length) {
            $("body").append(
                '<style id="js_zoom_style">'
                + '#mousespan{ width: 100px; height: 100px; background: #03c0f9; position: absolute; left: 0; top: 0; opacity: 0.5; filter: alpha(opacity=50);margin-left: ' + zoomOptions.mouseX + 'px;margin-top: ' + zoomOptions.mouseY + 'px;display: none;z-index: 19920311;}'
                + '#big{ overflow: hidden; margin-left: 20px; display: none;border: 1px solid rgb(0, 0, 0);height: 350px;width: 350px;position: absolute;background-color: white;}'
                + '#bigImg{ position: absolute; left: 0; top: 0;width:800px;height:800px;background-size: 200%;z-index:19920311;}'
                + '</style>'
            );
        }
        ;
        var smallPic = $(this);
        var element_top = smallPic.offset().top, element_left = smallPic.offset().left,
            element_width = smallPic.outerWidth();
        var mouseSpan = $("<span id='mousespan'></span>");  //创建鼠标移动的显示块
        var bigPicDiv = $("<div id='big'><img  id='bigImg' src='2.jpg'></div");
        var bigPicImg = bigPicDiv.find("#bigImg");
        smallPic.append(mouseSpan);     //将块追加到dom中
        bigPicDiv.css({top: element_top, left: element_left + element_width + 10}); //设置大图的位置
        $("body").after(bigPicDiv);     //将放大图追加到dom中

        function getPos(obj) {
            var l = 0;
            var t = 0;

            while (obj) {
                l += obj.offsetLeft;
                t += obj.offsetTop;

                obj = obj.offsetParent;
            }
            return {left: l, top: t};
        };
        var events = {
            "mouseenter": function (event) {
                var imgSrc = $(this).find("img").attr("src");
                bigPicImg.attr("src", imgSrc);
                mouseSpan.show();
                bigPicDiv.show();
            },
            "mousemove": function (event) {
                var oEvent = event;
                var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
                var l = oEvent.clientX - mouseSpan[0].offsetWidth / 2 - getPos(smallPic[0]).left + scrollLeft;
                var t = oEvent.clientY - mouseSpan[0].offsetHeight / 2 - getPos(smallPic[0]).top + scrollTop;

                if (l < 0) {
                    l = 0;
                }
                if (t < 0) {
                    t = 0;
                }
                if (l >= smallPic[0].offsetWidth - mouseSpan[0].offsetWidth) {
                    l = smallPic[0].offsetWidth - mouseSpan[0].offsetWidth;
                }
                if (t >= smallPic[0].offsetHeight - mouseSpan[0].offsetHeight) {
                    t = smallPic[0].offsetHeight - mouseSpan[0].offsetHeight;
                }
                mouseSpan[0].style.left = l + 'px';
                mouseSpan[0].style.top = t + 'px';

                var l2 = -l / (smallPic[0].offsetWidth - mouseSpan[0].offsetWidth) * (bigPicImg[0].offsetWidth - bigPicDiv[0].offsetWidth);
                var t2 = -t / (smallPic[0].offsetHeight - mouseSpan[0].offsetHeight) * (bigPicImg[0].offsetHeight - bigPicDiv[0].offsetHeight);
                bigPicImg[0].style.left = l2 + 'px';
                bigPicImg[0].style.top = t2 + 'px';
            },
            "mouseleave": function (event) {
                mouseSpan.hide();
                bigPicDiv.hide();
            }
        };
        $(zoomOptions.eventBroker).off(events, smallPic.selector).on(events, smallPic.selector);  //绑定事件

    };
})(jQuery);